<template>
  <div id="cmsContent">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-col :span="24" align="right">
        <el-select
          v-model="selectedSite"
          placeholder="请选择站点"
          @change="onCmsSiteChange"
          size="small"
        >
          <el-option
            v-for="item in optionsCmsSite"
            :key="item.id"
            :label="item.domain"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="tableCmsCate"
          :data="tableCmsCateData"
          border
          stripe
          fit
          highlight-current-row
          v-loading="tableCmsCateLoading"
          max-height="1200"
        >
          <el-table-column prop="name" label="栏目名称" width="320">
            <template slot-scope="scope">
              <span v-for="item in (scope.row.level - 1)" :key="item" style="padding-left: 18px;"></span>
              <i v-if="scope.row.isParent == true" class="el-icon-caret-bottom"></i>
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column prop="cateKind" label="类型" width="180">
            <template slot-scope="scope">{{ getCateKindLabel(scope.row.cateKind) }}</template>
          </el-table-column>
          <el-table-column prop="display" label="显示" width="180">
            <template slot-scope="scope">{{ getDisplayLabel(scope.row.display) }}</template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="80">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === 1 ? 'success' : 'danger'"
                size="small"
                disable-transitions
              >{{ scope.row.status === 1 ? '正常' : '禁用' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" width="80"></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                @click="handleManageCmsContent(scope.$index, scope.row)"
                type="text"
                size="small"
              >管理内容</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog
      :title="dialogTableCmsContentTitle"
      :visible.sync="dialogTableCmsContentVisible"
      width="80%"
      top="3vh"
      @closed="dialogTableCmsContentClosed"
    >
      <el-row>
        <el-col :span="24" align="right">
          <el-button
            @click="handleAddCmsContent"
            size="small"
            type="success"
            icon="el-icon-circle-plus-outline"
          >添加内容</el-button>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="24">
          <el-table
            ref="tableCmsContent"
            :data="tableCmsContentData"
            border
            stripe
            fit
            highlight-current-row
            v-loading="tableCmsContentLoading"
            max-height="1200"
          >
            <el-table-column prop="title" label="标题" width="320" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="url" label="URL" width="120" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="clicks" label="点击量" width="80"></el-table-column>
            <el-table-column prop="isTop" label="置顶" width="80">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.isTop == true ? 'primary' : 'info'"
                  size="small"
                  disable-transitions
                >{{ scope.row.isTop == true ? '是' : '否' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="isRcmd" label="推荐" width="80">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.isRcmd == true ? 'primary' : 'info'"
                  size="small"
                  disable-transitions
                >{{ scope.row.isRcmd == true ? '是' : '否' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.status === 1 ? 'success' : 'danger'"
                  size="small"
                  disable-transitions
                >{{ scope.row.status === 1 ? '可见' : '不可见' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="80"></el-table-column>
            <el-table-column
              prop="updated"
              label="修改日期"
              :formatter="dateFormat"
              width="180"
              sortable
            ></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  @click="handleEditCmsContent(scope.$index, scope.row)"
                  type="text"
                  size="small"
                >编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-dialog>

    <el-dialog
      :title="dialogCmsContentTitle"
      :visible.sync="dialogCmsContentVisible"
      width="75%"
      top="3vh"
      @closed="dialogCmsContentClosed"
    >
      <el-form ref="formCmsContent" :model="modelCmsContent" status-icon :rules="rulesCmsContent">
        <el-form-item
          label="标题"
          :label-width="formCmsContentLabelWidth"
          prop="title"
          v-if="cateKind != 1"
        >
          <el-input v-model="modelCmsContent.title" autocomplete="off" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="标签" :label-width="formCmsContentLabelWidth" prop="tags">
          <el-input v-model="modelCmsContent.tags" autocomplete="off" maxlength="200"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formCmsContentLabelWidth" prop="contentDesc">
          <el-input
            v-model="modelCmsContent.contentDesc"
            autocomplete="off"
            maxlength="300"
            type="textarea"
            :rows="4"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="URL"
          :label-width="formCmsContentLabelWidth"
          prop="url"
          v-if="cateKind != 1"
        >
          <el-input v-model="modelCmsContent.url" autocomplete="off" maxlength="300"></el-input>
        </el-form-item>
        <el-form-item
          label="图片"
          :label-width="formCmsContentLabelWidth"
          prop="pic"
          v-if="cateKind != 1"
        >
          <el-input v-model="modelCmsContent.pic" autocomplete="off" maxlength="200"></el-input>
        </el-form-item>
        <el-form-item
          label="图片2"
          :label-width="formCmsContentLabelWidth"
          prop="pic2"
          v-if="cateKind != 1"
        >
          <el-input v-model="modelCmsContent.pic2" autocomplete="off" maxlength="200"></el-input>
        </el-form-item>
        <el-form-item
          label="点击量"
          :label-width="formCmsContentLabelWidth"
          prop="clicks"
          v-if="cateKind != 1"
        >
          <el-input v-model="modelCmsContent.clicks" autocomplete="off" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="置顶推荐" :label-width="formCmsContentLabelWidth" v-if="cateKind != 1">
          <el-checkbox v-model="modelCmsContent.isTop">置顶</el-checkbox>
          <el-checkbox v-model="modelCmsContent.isRcmd">推荐</el-checkbox>
        </el-form-item>
        <el-form-item label="状态" :label-width="formCmsContentLabelWidth" v-if="cateKind != 1">
          <el-select v-model="modelCmsContent.status" placeholder="请选择状态">
            <el-option
              v-for="option in statusOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="排序"
          :label-width="formCmsContentLabelWidth"
          prop="sort"
          placeholder="排序编号越小越靠前"
          v-if="cateKind != 1"
        >
          <el-input v-model="modelCmsContent.sort" autocomplete="off" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="正文" :label-width="formCmsContentLabelWidth" prop="content">
          <el-input
            v-model="modelCmsContent.content"
            autocomplete="off"
            maxlength="500"
            type="textarea"
            :rows="8"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCmsContentVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="isButtonLoadingCmsContent"
          @click="onSubmitCmsContent"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from '../assets/js/nix.utils.js'
import { getAPI } from '../assets/js/resources.js'
var Qs = require('qs')

export default {
  name: 'cmsContent',
  data() {
    var checkTitle = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('标题不能为空'))
      } else {
        callback()
      }
    }
    var checkSort = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('排序不能为空'))
      } else {
        callback()
      }
    }
    return {
      optionsCmsSite: [],
      selectedSite: null,
      siteId: null,
      tableCmsCateData: [],
      tableCmsCateLoading: false,
      dialogTableCmsContentTitle: '管理内容',
      dialogTableCmsContentVisible: false,
      cateId: null,
      cateKind: null,
      page: 1,
      rows: 20,
      total: 100,
      tableCmsContentData: [],
      tableCmsContentLoading: false,
      dialogCmsContentVisible: false,
      dialogCmsContentTitle: '添加文章',
      cateKindOptions: [
        {
          label: '简介模块',
          value: 1
        },
        {
          label: '文章模块',
          value: 2
        },
        {
          label: '图片模块',
          value: 3
        },
        {
          label: '下载模块',
          value: 4
        },
        {
          label: '招聘模块',
          value: 5
        },
        {
          label: '友链模块',
          value: 6
        }
      ],
      displayOptions: [
        {
          label: '不显示',
          value: 1
        },
        {
          label: '都显示',
          value: 2
        },
        {
          label: '头部导航显示',
          value: 3
        },
        {
          label: '底部导航显示',
          value: 4
        }
      ],
      statusOptions: [
        {
          label: '显示',
          value: 1
        },
        {
          label: '不显示',
          value: 2
        }
      ],
      modelCmsContent: {
        id: null,
        cateId: null,
        tags: '',
        contentDesc: '',
        url: '',
        pic: '',
        pic2: '',
        clicks: 0,
        isTop: false,
        isRcmd: false,
        sort: 666,
        status: 1,
        siteId: null,
        content: ''
      },
      rulesCmsContent: {
        title: [{ validator: checkTitle, trigger: 'blur' }],
        sort: [{ validator: checkSort, trigger: 'blur' }]
      },
      formCmsContentLabelWidth: '80px',
      isButtonLoadingCmsContent: false
    }
  },
  methods: {
    // Table
    loadCmsSite() {
      var that = this
      this.$axios
        .get(getAPI('API_GET_CMS_SITE_LIST'))
        .then(function(response) {
          if (response.data.status === 200) {
            that.optionsCmsSite = response.data.data.list
            if (that.optionsCmsSite && that.optionsCmsSite.length > 0) {
              that.selectedSite = that.optionsCmsSite[0]
              that.siteId = that.optionsCmsSite[0].id
              that.onCmsSiteChange()
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    onCmsSiteChange() {
      if (this.selectedSite) {
        this.loadtableCmsCateData()
        this.modelCmsContent.siteId = this.siteId
        this.AddCmsCateButtonDisabled = false
      }
    },
    loadtableCmsCateData() {
      this.tableCmsSiteLoading = true
      var that = this
      this.$axios
        .get(getAPI('API_GET_CMS_CATE_LIST'), {
          params: { siteId: that.siteId }
        })
        .then(function(response) {
          if (response.data.status === 200) {
            that.tableCmsCateData = response.data.data
            that.tableCmsSiteLoading = false
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    loadtableCmsContentData() {
      this.tableCmsContentLoading = true
      var that = this
      this.$axios
        .get(getAPI('API_GET_CMS_CONTENT_LIST'), {
          params: { page: that.page, rows: that.rows, cateId: that.cateId }
        })
        .then(function(response) {
          if (response.data.status === 200) {
            that.tableCmsContentData = response.data.data.list
            that.tableCmsContentLoading = false
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleManageCmsContent(index, row) {
      this.cateId = row.id
      this.cateKind = row.cateKind
      if (row.cateKind === 1) {
        // 简介模块
        this.dialogCmsContentTitle = '编辑内容【' + row.name + '】'
        this.dialogCmsContentVisible = true
        this.modelCmsContent.cateId = this.cateId
        this.modelCmsContent.title = row.name
        // 获取第一条
        var that = this
        this.$axios
          .get(getAPI('API_GET_CMS_CONTENT_LIST'), {
            params: { cateId: that.cateId }
          })
          .then(function(response) {
            if (response.data.status === 200) {
              var tmp = response.data.data.list
              if (tmp && tmp.length > 0) {
                that.modelCmsContent.id = tmp[0].id
                that.modelCmsContent.cateId = tmp[0].cateId
                that.modelCmsContent.title = tmp[0].title
                that.modelCmsContent.tags = tmp[0].tags
                that.modelCmsContent.contentDesc = tmp[0].contentDesc
                that.modelCmsContent.url = tmp[0].url
                that.modelCmsContent.pic = tmp[0].pic
                that.modelCmsContent.pic2 = tmp[0].pic2
                that.modelCmsContent.clicks = tmp[0].clicks
                that.modelCmsContent.isTop = tmp[0].isTop
                that.modelCmsContent.isRcmd = tmp[0].isRcmd
                that.modelCmsContent.sort = tmp[0].sort
                that.modelCmsContent.status = tmp[0].status
                that.modelCmsContent.siteId = tmp[0].siteId
                // 获取正文
                that.getContentTextById(tmp[0].id)
              }
            }
          })
          .catch(function(error) {
            console.log(error)
          })
      } else {
        this.dialogTableCmsContentTitle = '管理内容【' + row.name + '】'
        this.dialogTableCmsContentVisible = true
        this.loadtableCmsContentData()
      }
    },
    handleAddCmsContent() {
      this.dialogCmsContentTitle = '添加内容'
      this.modelCmsContent.cateId = this.cateId
      this.dialogCmsContentVisible = true
    },
    handleEditCmsContent(index, row) {
      // console.log(index, row);
      this.dialogCmsContentTitle = '修改内容'
      this.dialogCmsContentVisible = true
      this.modelCmsContent.id = row.id
      this.modelCmsContent.cateId = row.cateId
      this.modelCmsContent.title = row.title
      this.modelCmsContent.tags = row.tags
      this.modelCmsContent.contentDesc = row.contentDesc
      this.modelCmsContent.url = row.url
      this.modelCmsContent.pic = row.pic
      this.modelCmsContent.pic2 = row.pic2
      this.modelCmsContent.clicks = row.clicks
      this.modelCmsContent.isTop = row.isTop
      this.modelCmsContent.isRcmd = row.isRcmd
      this.modelCmsContent.sort = row.sort
      this.modelCmsContent.status = row.status
      this.modelCmsContent.siteId = row.siteId
      // 获取正文
      this.getContentTextById(row.id)
    },
    getContentTextById(id) {
      var that = this
      this.$axios
        .get(getAPI('API_GET_CMS_CONTENT_TEXT'), { params: { id: id } })
        .then(function(response) {
          if (response.data.status === 200) {
            that.modelCmsContent.content = response.data.data.content
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    indexMethod(index) {
      return index + 1
    },
    dateFormat(row, column, cellValue, index) {
      var date = new Date(cellValue)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    getCateKindLabel(cateKind) {
      var label
      this.cateKindOptions.forEach(function(item, index) {
        if (item.value === cateKind) {
          label = item.label
        }
      })
      return label
    },
    getDisplayLabel(display) {
      var label
      this.displayOptions.forEach(function(item, index) {
        if (item.value === display) {
          label = item.label
        }
      })
      return label
    },
    // Edit
    onSubmitCmsContent() {
      this.isButtonLoadingCmsContent = true
      this.$refs.formCmsContent.validate(valid => {
        if (valid) {
          var that = this
          this.$axios({
            method: 'post',
            url: getAPI('API_POST_CMS_CONTENT_SAVE'),
            data: Qs.stringify(that.modelCmsContent)
          })
            .then(function(response) {
              if (response.data.status === 200) {
                that.$message({
                  message: '保存成功',
                  type: 'success'
                })
                that.isButtonLoadingCmsContent = false
                that.dialogCmsContentVisible = false
                if (that.cateKind !== 1) {
                  that.loadtableCmsContentData()
                }
              } else {
                that.$message.error(response.data.msg)
                that.isButtonLoadingCmsContent = false
              }
            })
            .catch(function(error) {
              console.log(error)
            })
        }
      })
    },
    resetForm() {
      this.modelCmsContent = {
        id: null,
        cateId: null,
        tags: '',
        contentDesc: '',
        url: '',
        pic: '',
        pic2: '',
        clicks: 0,
        isTop: false,
        isRcmd: false,
        sort: 666,
        status: 1,
        siteId: null,
        content: ''
      }
      this.$refs.formCmsContent.resetFields()
    },
    dialogTableCmsContentClosed() {},
    dialogCmsContentClosed() {
      this.resetForm()
    }
  },
  created() {
    this.loadCmsSite()
  }
}
</script>

<style scoped>
</style>
